<template>
  <div class="warpper-box inductionInfo">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="任务名称">
          <a-input placeholder="任务名称" v-decorator="['taskName']"></a-input>
        </a-form-item>
        <a-form-item label="任务类型">
          <a-select v-decorator="['taskType']" style="width: 240px;margin-right: 15px;" placeholder="请选择任务类型">
            <a-select-option :key="1">
              企业宣传
            </a-select-option>
            <a-select-option :key="2">
              数据处理
            </a-select-option>
            <a-select-option :key="3">
              考勤处理
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="任务时间">
          <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type='primary' @click="loadTable(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
          <a-button type="primary" @click="$refs.createInfo.add(true)">新增</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="id">
        <span slot="taskStartTime" slot-scope="text, record">
          <template>
            <span>{{ record.taskStartTime }} -- {{ record.taskEndTime }}</span>
          </template>
        </span>
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.createInfo.add(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleTask(record)">关联任务</a>
          <a-divider type="vertical" />
          <a @click="$refs.taskCount.add(record)">任务统计</a>
          <span>
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
    <!-- 任务统计 -->
    <task-count ref="taskCount" @on-ok="addLoad"></task-count>
    <!-- 关联任务导入 -->
    <a-modal v-model="isTask" title="关联任务" width="800px" :footer="false">
      <div>
        <a-button type="primary" @click="importTable">上传文件</a-button>
        <a-button type="danger" @click="downTempTable">下载模板</a-button>
        <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel" @change="importTableHandle" style="display: none;" />
      </div>
      <div>
        <a-table :columns="tableTask.columns" :data-source="tableTask.loadData" :pagination="tableTask.pagination"
          @change="handleTableTaskChange" rowKey="id">
          <!-- 操作栏-->
          <span slot="action" slot-scope="text, record">
            <!-- 编辑模块 | 字段 -->
            <span>
              <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="removeTask(record)">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </span>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>

import store from '@/store'
import AddInfo from "./complianceTask_add.vue"
import TaskCount from "./complianceTask_count.vue"
import {
  COLUMNS_COMPLIANCETASK,
  COLUMNS_COMPLIANCETASKTASK
} from "./form"
import {
  getPageDisabledTask,
  deleteTask,
  exportDisabledBusiness,
  exportDisabledBusinessImg,
  pageDisabledTaskRelation,
  importDisabledTaskDetail,
  deleteTaskRelation,
  taskDownTemplate
} from "@/api/human/disabled"
import { mapGetters,mapActions } from 'vuex'
export default {
  name: 'inductionList',
  components: {
    AddInfo,
    TaskCount
  },
  data() {
    return {
      table: {
        columns: COLUMNS_COMPLIANCETASK,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
      // 关联任务表格参数
      isTask: false,
      tableTask: {
        columns: COLUMNS_COMPLIANCETASKTASK,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      paginationTask: { current: 1, pageSize: 10 },
      taskBaseId: "",
      
      rangeDate: [], // 日期范围
      taskStartTime: "",
      taskEndTime: "",
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    this.loadTable(true);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 日期选择
    rangeChange(e) {
      this.taskStartTime = e[0];
      this.taskEndTime = e[1];
    },
    // 获取达标任务列表
    async loadTable(flag) {
      let params = this.events_form.getFieldsValue();
      params.taskStartTime = this.taskStartTime;
      params.taskEndTime = this.taskEndTime;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getPageDisabledTask(params);
      if (code == '1') {
        this.table.loadData = data.content || [];
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导出功能
    exportTable() {
      let params = this.events_form.getFieldsValue();
      params.taskStartTime = this.taskStartTime;
      params.taskEndTime = this.taskEndTime;
      exportDisabledBusiness(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业宣传记录.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 批量下载
    downloadTable() {
      let params = {
        ids: this.selectedRowKeys
      };
      exportDisabledBusinessImg(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业宣传记录图片.zip';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    
    // 删除列表数据
    async remove(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await deleteTask(params);
      if (code == '1') {
        this.$message.success('删除成功');
        this.loadTable(true);
      }
    },
    // 任务统计操作
    handleTaskCount(row) {

    },
    // 关联任务操作
    handleTask(row) {
      this.isTask = true;
      this.taskBaseId = row.id;
      this.loadTableTask(true);
    },
    // 获取达标关联任务列表
    async loadTableTask(flag) {
      let params = {};
      params.taskBaseId = this.taskBaseId;
      if (flag) {
        this.tableTask.pagination.current = 1;
        this.tableTask.pagination.pageSize = 10;
      }
      params.pageNum = this.tableTask.pagination.current;
      params.pageSize = this.tableTask.pagination.pageSize;
      const { code, data } = await pageDisabledTaskRelation(params);
      if (code == '1') {
        this.tableTask.loadData = data.content || [];
        this.tableTask.pagination.total = data.total || 0;
      }
    },
    handleTableTaskChange(pagination) {
      this.tableTask.pagination.current = paginationta.current;
      this.tableTask.pagination.pageSize = pagination.pageSize;
      this.loadTableTask(false);
    },
    // 关联任务导入表单
    importTable() {
      this.$refs.fileExcel.click();
    },
    async importTableHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.name.indexOf('.xls') === -1) {
        _this.$message.error("只支持xlsx");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 20)) {
        _this.$message.error('模版大小不能超过 20MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("taskBaseId", this.taskBaseId);
        formData.append("file", file);
        const { code } = await importDisabledTaskDetail(formData);
        if (code == '1') {
          this.$message.success('操作成功');
          this.loadTableTask(true);
        }
      }
    },
    // 下载功能
    downTempTable() {
      let params = this.events_form.getFieldsValue();
      taskDownTemplate(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '任务管理模版.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 删除列表数据
    async removeTask(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await deleteTaskRelation(params);
      if (code == '1') {
        this.$message.success('删除成功');
        this.loadTableTask(true);
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.events_form.resetFields();
      this.rangeDate = [];
      this.taskStartTime = "";
      this.taskEndTime = "";
      this.loadTable(true);
    },
  }
}
</script>
